<template>
  <div>

    <div>
      <el-button type='primary' @click='emailManage'>账户管理</el-button>
      <el-button type='success' @click='getUserDetails'>基本资料</el-button>
    </div>

    <div v-if='this.accountDetailsStatus'>
      <el-card style='width: auto; padding: 60px; margin-top: 20px;'>
        <div>
          <el-row>
            <el-col :span='20'>
              <span>邮箱：</span><span>{{ this.emailForm.email }}</span>
            </el-col>
            <el-col :span='4'>
              <el-button style='' type='small' plain @click='emailDialog = true'>修改邮箱</el-button>
            </el-col>
          </el-row>
        </div>

        <el-dialog title='绑定邮箱' :visible.sync='emailDialog' center width='500px'>
          <el-form :model='emailForm' :rules='rules'>
            <el-form-item label='' :label-width='labelWidth' prop='email'>
              <el-input v-model='emailForm.email' autocomplete='off' placeholder='请输入邮箱账号'></el-input>
            </el-form-item>
          </el-form>
          <div slot='footer' class='dialog-footer'>
            <el-button @click='emailDialog = false'>取 消</el-button>
            <el-button type='primary' @click='bindEmailButton'>确 定</el-button>
          </div>
        </el-dialog>

        <div style='padding-top: 20px;'>
          <el-row>
            <el-col :span='20'>
              <span>密码：</span><span></span>
            </el-col>
            <el-col :span='4'>
              <div>
                <el-button style='' type='small ' plain @click='passwordDialog = true'>修改密码</el-button>
              </div>
            </el-col>
          </el-row>
        </div>

        <el-dialog title='修改密码' :visible.sync='passwordDialog' center width='500px'>
          <el-form :model='emailForm' :rules='rules'>
            <el-form-item :label-width='labelWidth' prop='old_password'>
              <el-input v-model='emailForm.old_password' placeholder='请输入原密码' show-password
                        autocomplete='off'></el-input>
            </el-form-item>

            <el-form-item :label-width='labelWidth' prop='new_password'>
              <el-input v-model='emailForm.new_password' placeholder='请输入新密码' show-password
                        autocomplete='off'></el-input>
            </el-form-item>

            <el-form-item :label-width='labelWidth' prop='confirm_password'>
              <el-input v-model='emailForm.confirm_password' placeholder='请确认新密码' show-password
                        autocomplete='off'></el-input>
            </el-form-item>
          </el-form>
          <div slot='footer' class='dialog-footer'>
            <el-button @click='cancelPassword'>取 消</el-button>
            <el-button type='primary' @click='passwordButton'>确 定</el-button>
          </div>
        </el-dialog>

        <div style='padding-top: 20px;'>
          <el-row>
            <el-col :span='24'>
              <span>简历状态：</span>
              <el-select size='small' v-model='resumeStatus' @change='changedResumeStatus' style='width: 30%'>
                <el-option label='在职中有更好的机会可以考虑' value='1'></el-option>
                <el-option label='在职中不打算换工作（不公开我的简历）' value='2'></el-option>
                <el-option label='可随时到岗' value='3'></el-option>
              </el-select>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>

    <div v-if='this.notPerfect' style='padding-top: 20px;'>
      <div style='height: 30px;'>
        <el-card>
          <el-descriptions class='margin-top' title='基础信息' :column='2'>
            <el-descriptions-item label='姓名'>{{ responseBaseDataForm.NAME || '-' }}</el-descriptions-item>
            <el-descriptions-item label='性别'>{{ cmpSEX || '-' }}</el-descriptions-item>
            <el-descriptions-item label='生日'>{{ responseBaseDataForm.BIRTHDAY || '-' }}</el-descriptions-item>
            <el-descriptions-item label='最高学历'>{{ cmpEDUCATION || '-' }}</el-descriptions-item>
            <el-descriptions-item label='手机号'>{{ responseBaseDataForm.PHONE || '-' }}</el-descriptions-item>
            <el-descriptions-item label='邮箱'>{{ responseBaseDataForm.EMAIL || '-' }}</el-descriptions-item>
            <el-descriptions-item label='参加工作时间'>{{ responseBaseDataForm.TIMEWORK || '-' }}</el-descriptions-item>
            <el-descriptions-item label='现居住地址'>{{ responseBaseDataForm.RESIDENCE || '-' }}</el-descriptions-item>
            <el-descriptions-item label='身高'>{{ responseBaseDataForm.HEIGHT || '-' }}</el-descriptions-item>
            <el-descriptions-item label='求职状态'>{{ cpmJOBWANTEDSTATUS || '-' }}</el-descriptions-item>
          </el-descriptions>

          <el-button size='mini' type='danger' @click='goBaseData'>去完善资料</el-button>
        </el-card>
      </div>

      <el-dialog title='基本资料' :visible.sync='baseData' center>
        <el-form :model='baseDataForm'>
          <el-row>
            <el-col :span='12'>
              <el-form-item label='姓名' :label-width='baseDataWidth'>
                <el-input v-model='baseDataForm.NAME' placeholder='请输入姓名'></el-input>
              </el-form-item>

              <el-form-item label='生日' :label-width='baseDataWidth'>
                <el-col :span='11'>
                  <el-form-item>
                    <el-date-picker
                      type='date'
                      value-format='yyyy-MM-dd'
                      placeholder='选择出生日期'
                      v-model='baseDataForm.BIRTH'
                      style='width: 218%;'>
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>

              <el-form-item label='电话' prop='PHONE' :label-width='baseDataWidth'>
                <el-input v-model='baseDataForm.PHONE' placeholder='请输入电话号码'></el-input>
              </el-form-item>

              <el-form-item label='身高' prop='PHONE' :label-width='baseDataWidth'>
                <el-input v-model='baseDataForm.HEIGHT' placeholder='请输入身高'></el-input>
              </el-form-item>

              <el-form-item label='参加工作的时间' prop='PHONE' label-width='150px'>
                <el-input v-model='baseDataForm.TIMEWORK' placeholder='请输入初次参加工作的时间'></el-input>
              </el-form-item>
            </el-col>

            <el-col :span='12'>
              <el-form-item label='性别' :label-width='baseDataWidth'>
                <el-radio-group v-model='baseDataForm.SEX'>
                  <el-radio :label='2'>女</el-radio>
                  <el-radio :label='1'>男</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label='最高学历' :label-width='baseDataWidth'>
                <el-select v-model='baseDataForm.EDUCATION' placeholder='请选择最高学历' style='width: 100%;'>
                  <el-option label='初中' :value='1'>初中</el-option>
                  <el-option label='高中' :value='2'>高中</el-option>
                  <el-option label='中专' :value='3'>中专</el-option>
                  <el-option label='大专' :value='4'>大专</el-option>
                  <el-option label='本科' :value='5'>本科</el-option>
                  <el-option label='研究生' :value='6'>研究生</el-option>
                  <el-option label='其他' :value='7'>其他</el-option>
                </el-select>
              </el-form-item>

              <el-form-item label='电子邮箱' :label-width='baseDataWidth'>
                <el-input v-model='baseDataForm.EMAIL' placeholder='请输入电子邮箱'></el-input>
              </el-form-item>

              <el-form-item label='求职状态' :label-width='baseDataWidth'>
                <el-select v-model='baseDataForm.JOBWANTEDSTATUS' placeholder='请选择求职状态' style='width: 100%;'>
                  <el-option label='在职-暂不考虑' value='1'></el-option>
                  <el-option label='离职-随时到岗' value='2'></el-option>
                  <el-option label='在职-考虑机会' value='3'></el-option>
                  <el-option label='在职-月内到岗' value='4'></el-option>
                  <el-option label='其他' value='5'></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter='20'>
            <el-col :span='24'>
              <el-form-item label='现居住地' label-width='80px'>
                <el-input v-model='baseDataForm .WORKYEARS' placeholder='请填写详细的现居住地址'></el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div slot='footer' class='dialog-footer'>
          <el-button @click='baseData = false'>取 消</el-button>
          <el-button type='primary' @click='saveBaseDataForm'>保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import {
  bindEmailByUid,
  getAccountDetails,
  checkPassword,
  updatePassword,
  changedResumeStatus,
  saveBaseDataFormByUid,
  getUserDetails
} from '../../api/api'

export default {
  name: 'xueShuJiaoLiu',
  data() {
    var checkEmail = (rule, value, cb) => {
      //验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        //合法的邮箱
        return cb()
      }
      //邮箱不合法
      cb(new Error('请输入正确的邮箱！'))
    }

    return {
      emailDialog: false,
      passwordDialog: false,
      baseData: false,
      accountDetailsStatus: true,
      notPerfect: false,
      labelWidth: '120',
      baseDataWidth: '80px',
      resumeStatus: '1',
      responseBaseDataForm: {},
      baseDataForm: {
        NAME: '',
        BIRTH: '',
        PHONE: '',
        HEIGHT: '',
        TIMEWORK: '',
        SEX: '',
        EDUCATION: '',
        EMAIL: '',
        JOBWANTEDSTATUS: '',
        WORKYEARS: ''
      },
      emailForm: {
        email: '',
        old_password: '',
        new_password: '',
        confirm_password: ''
      },
      rules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'change' },
          { validator: checkEmail, trigger: 'change' }
        ],
        old_password:[{ required: true, message: '请输入原密码', trigger: 'blur' }],
        new_password:[{ required: true, message: '请输入新密码', trigger: 'blur' }],
        confirm_password:[{ required: true, message: '请确认新密码', trigger: 'blur' }],
      }
    }
  },

  created() {
    this.accountDetails()
  },

  computed: {

    cmpSEX() {
      switch (this.responseBaseDataForm.SEX) {
        case 1:
          return '男'
          break
        case 2:
          return '女'
          break
        case 0:
          return '未知'
      }
    },
    cmpEDUCATION() {
      switch (this.responseBaseDataForm.EDUCATION) {
        case 1:
          return '初中'
          break
        case 2:
          return '高中'
          break
        case 3:
          return '中专'
          break
        case 4:
          return '大专'
          break
        case 5:
          return '本科'
          break
        case 6:
          return '研究生'
          break
        case 7:
          return '其他'
      }
    },
    cpmJOBWANTEDSTATUS() {
      switch (this.responseBaseDataForm.JOBWANTEDSTATUS) {
        case '1':
          return '在职-暂不考虑'
          break
        case '2':
          return '离职-随时到岗'
          break
        case '3':
          return '在职-考虑机会'
          break
        case '4':
          return '在职-月内到岗'
          break
        case '5':
          return '其他'
      }
    }
  },

  methods: {
    bindEmailButton() {
      this.emailDialog = false
      if (this.emailForm.email) {
        //处理绑定的邮箱
        this.bindEmail()
      }
      this.emailForm = {
        email: ''
      }
    },

    bindEmail() {
      const data = {
        EMAIL: this.emailForm.email
      }
      bindEmailByUid(data)
        .then(res => {
          if (res.code == 200) {
            this.$message.success('操作成功')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    accountDetails() {
      getAccountDetails().then(res => {
        if (res.code == 200) {
          if (res.data.DISPLAYSTATUS) {
            this.resumeStatus = res.data.DISPLAYSTATUS
          } else {
            this.resumeStatus = ''
          }
          if (res.data.EMAIL) {
            this.emailForm.email = res.data.EMAIL
          } else {
            this.emailForm.email = ''
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },

    passwordButton() {
      //判断原密码是否为null
      if (this.emailForm.old_password && this.emailForm.new_password && this.emailForm.confirm_password) {
        const data = {
          password: this.emailForm.old_password
        }

        //发送接口后端校验是否输入正确
        checkPassword(data).then(res => {
            if (res.data == 'success') {
              if (this.emailForm.new_password && this.emailForm.confirm_password) {
                if (this.emailForm.new_password === this.emailForm.confirm_password) {
                  //发送后端保存起来
                  const data = {
                    password: this.emailForm.new_password
                  }
                  updatePassword(data).then(res => {
                      if (res.data == 'success') {
                        this.passwordDialog = false
                        this.$message.success('操作成功')
                        this.emailForm = {
                          old_password: '',
                          new_password: '',
                          confirm_password: ''
                        }
                      } else {
                        this.passwordDialog = false
                        this.$message.success('操作失败，请重新修改')
                        this.emailForm = {
                          old_password: '',
                          new_password: '',
                          confirm_password: ''
                        }
                      }
                    })
                }
              } else {
                this.$message.error('新密码不能为空')
              }
            } else {
              this.$message.success('原密码错误，请重新输入')
              this.emailForm = {
                old_password: '',
                new_password: '',
                confirm_password: ''
              }
            }
          })
      } else {
        this.$message.error('密码不能为空')
      }
    },

    //取消修改密码
    cancelPassword() {
      this.passwordDialog = false
      this.emailForm = {
        old_password: '',
        new_password: '',
        confirm_password: ''
      }
    },

    changedResumeStatus(value) {
      const data = {
        DISPLAYSTATUS: value
      }
      changedResumeStatus(data)
        .then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message.success('状态修改成功')
          }
        })
    },

    saveBaseDataForm() {
      const data = {
        NAME: this.baseDataForm.NAME,
        BIRTH: this.baseDataForm.BIRTH,
        PHONE: this.baseDataForm.PHONE,
        HEIGHT: this.baseDataForm.HEIGHT,
        TIMEWORK: this.baseDataForm.TIMEWORK,
        SEX: this.baseDataForm.SEX,
        EDUCATION: this.baseDataForm.EDUCATION,
        EMAIL: this.baseDataForm.EMAIL,
        JOBWANTEDSTATUS: this.baseDataForm.JOBWANTEDSTATUS,
        WORKYEARS: this.baseDataForm.WORKYEARS
      }
      this.baseData = false
      saveBaseDataFormByUid(data)
        .then(res => {
          console.log('--------------------', res.data)
          if (res.code == 200) {
            this.$message.success('保存成功！！！')
            this.getUserDetails()
          }
        })

    },

    getUserDetails() {
      this.notPerfect = true
      this.accountDetailsStatus = false
      getUserDetails()
        .then(res => {
          if (res.code == 200) {
            this.responseBaseDataForm = {}
            this.responseBaseDataForm = res.data
          }
        })
    },

    emailManage() {
      this.notPerfect = false
      this.accountDetailsStatus = true
      this.accountDetails()
    },

    goBaseData() {
      this.baseData = true
      this.baseDataForm.NAME = this.responseBaseDataForm.NAME
      this.baseDataForm.SEX = this.responseBaseDataForm.SEX
      this.baseDataForm.BIRTH = this.responseBaseDataForm.BIRTHDAY
      this.baseDataForm.EDUCATION = this.responseBaseDataForm.EDUCATION
      this.baseDataForm.PHONE = this.responseBaseDataForm.PHONE
      this.baseDataForm.EMAIL = this.responseBaseDataForm.EMAIL
      this.baseDataForm.TIMEWORK = this.responseBaseDataForm.TIMEWORK
      this.baseDataForm.WORKYEARS = this.responseBaseDataForm.RESIDENCE
      this.baseDataForm.HEIGHT = this.responseBaseDataForm.HEIGHT
      this.baseDataForm.JOBWANTEDSTATUS = this.responseBaseDataForm.JOBWANTEDSTATUS
    }
  }
}
</script>

<style lang='less' scoped>

</style>
